<template>
	<view class="uni-popup-share">
		<view class="uni-share-title">
			<text class="uni-share-title-text">{{ shareTitleText }}</text>
		</view>
		<view class="uni-share-content">
			<view class="uni-share-content-box">
				<view class="uni-share-content-item" v-for="(item, index) in bottomData" :key="index" @click.stop="selectItem(item, index)">
					<view class="uni-share-image-box">
						<image class="uni-share-image" :src="item.icon" mode="heightFix"></image>
					</view>
					<text class="uni-share-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view class="uni-share-button-box">
			<button class="uni-share-button" @click="close">取消分享</button>
		</view>
	</view>
</template>

<script>
import popup from '../uni-popup/popup.js';
import { initVueI18n } from '@dcloudio/uni-i18n';
import messages from '../uni-popup/i18n/index.js';
const { t } = initVueI18n(messages);
export default {
	name: 'UniPopupShare',
	mixins: [popup],
	emits: ['select'],
	props: {
		title: {
			type: String,
			default: ''
		},
		beforeClose: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			bottomData: [
				{
					text: '微信',
					icon: 'https://bicpic.baikewang.com/images/1689752575488.png',
					name: 'wx',
					shareInfo:{
						type: 5,
						scene: 'WXSceneSession',
						provider: 'weixin',
						title: '分享标题',
						summary: '分享描述',
						href: '分享链接',
						imageUrl: '分享图片', // 必须
					},
				},
				{
					text: '朋友圈',
					icon: 'https://bicpic.baikewang.com/images/1689752575437.png',
					name: 'pyq',
					shareInfo:{
						type: 5,
						scene: 'WXSceneTimeline',
						provider: 'weixin',
						title: '分享标题',
						summary: '分享描述',
						href: '分享链接',
						imageUrl: '分享图片', // 必须
					},
				},
				{
					text: 'QQ',
					icon: 'https://bicpic.baikewang.com/images/1689752575441.png',
					name: 'qq',
					shareInfo:{
						type: 2,
						provider: 'qq',
						imageUrl: '分享图片', // 必须
					},
				},
				{
					text: '保存图片',
					icon: 'https://bicpic.baikewang.com/images/1689752575486.png',
					name: 'img'
				}
			]
		};
	},
	created() {},
	computed: {
		cancelText() {
			return t('uni-popup.cancel');
		},
		shareTitleText() {
			return this.title || t('uni-popup.shareTitle');
		}
	},
	methods: {
		/**
		 * 选择内容
		 */
		selectItem(item, index) {
			this.$emit('selectShare', {
				shareInfo:item.shareInfo,
				index
			});
			this.close();
		},
		/**
		 * 关闭窗口
		 */
		close() {
			if (this.beforeClose) {
				this.$emit('close');
				return;
			}
			this.popup.close();
		}
	}
};
</script>
<style lang="scss">
.uni-popup-share {
	background-color: #ffffff;
	border-top-left-radius: 39rpx;
	border-top-right-radius: 39rpx;
	padding: 40rpx 68rpx;
	box-sizing: border-box;
}
.uni-share-title {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	height: 40px;
}
.uni-share-title-text {
	font-size: 24px;
	color: #121317;
	font-weight: bold;
}
.uni-share-content {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding-top: 10px;
}

.uni-share-content-box {
	/* #ifndef APP-NVUE */
	display: grid;
	/* #endif */
	flex-direction: row;
	// flex-wrap: nowrap;
	// justify-content: space-between;
	display: grid;
	grid-gap: 0 30rpx;
	grid-template-areas: '. . . .';
	width: calc(750rpx - 68rpx * 2);
	// overflow-x: auto;
	// background-color: red;
}

.uni-share-content-item {
	width: max-content;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	padding: 10px 4px;
	align-items: center;
}

.uni-share-content-item:active {
	background-color: rgba(244, 245, 247, 0.4);
}
.uni-share-image-box {
	background-color: #f4f5f7;
	border-radius: 29rpx;
	padding: 20rpx 25rpx;
}
.uni-share-image {
	// width: 30px;
	height: 30px;
}

.uni-share-text {
	margin-top: 10px;
	font-size: 16px;
	color: #121317;
}

.uni-share-button-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	padding: 32rpx 0;
}

.uni-share-button {
	flex: 1;
	border-radius: 24rpx;
	background-color: #f8f8f8;
	color: #121317;
	font-size: 36rpx;
	// font-weight: bold;
}

.uni-share-button::after {
	// border-radius: 50px;
	border-width: 0;
}
</style>
